<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title>账号管理系统</title>
    <style>
       .none{
            display: none;
       }

       .borderBottom{
            border-bottom:solid 2px #0000FF;
       }

       .selectColor{
            color: #0000FF;
       }

       .iithree{
            margin:auto;
            text-align:left;
            width:40%;
            margin-top: 30px;
            border: none;

       }

       .iithree th{
            border: none;
            border-bottom: solid 1px #AAAAAA;
            padding-left: 10px;
            line-height: 40px;
       }

       .iithree td{
            border: none;
            border-bottom: solid 1px #AAAAAA;
            line-height: 40px;
       }

       .iithree tr{
            border: none;
            border-left: solid 1px #AAAAAA;
       }

       .iithree1{
            margin:auto;
            text-align:left;
            width:90%;
            margin-top: 30px;
            border: none;

       }

       .iithree1 th{
            border: none;
            border-bottom: solid 1px #AAAAAA;
            padding-left: 10px;
            line-height: 40px;
       }

       .iithree1 td{
            border: none;
            border-bottom: solid 1px #AAAAAA;
            line-height: 40px;
       }

       .iithree1 tr{
            border: none;
            border-left: solid 1px #AAAAAA;
       }

       .frame1{
            border: solid 1px #AAAAAA;
            cursor: pointer;
       }
       /* 开关按钮 */
      .btn-on{
        width: 60px;
        height: 25px;
        margin: 0 3px;
        border-radius: 25px;
        font-size: 14px;
        float: left;
      }
      .btn-on{
        cursor: pointer;
        position: relative;
        border: 1px solid white;
        background-color: #12B090;
      }
      .btn-on-circle{
        position: absolute;
        width: 15px;
        height: 15px;
        top: 5px;
        left: 5px;
        background-color: rgb(255, 255, 255);
        border-radius: 50%;
        box-shadow: 0 0 10px white;
        transition: all .5s;
      }
      .btn-on-text{
        position: absolute;
        right: 10px;
        line-height: 25px;
        color: white;
        transition: all .5s;
      }

        .icon-eye {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-left: -35px;
            background-image: url('images/eye.png');
        }
        .icon-eye-close {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-left: -35px;
            background-image: url('images/eye-close.png');
        }

        .table2{        
            border:#C8C8C8 solid;           
            border-width:1px 0px 0px 0px;         
            /*background: #F3F0F0;        */
            margin-top:25px;   
        }        
        .td0{        
            border:#C8C8C8 solid;          
            border-width:0 0 1px 0;    
        }        
        .td2{        
            border:#C8C8C8 solid;           
            border-width:0 1px 1px 0 ;    
        }        
        .barcon {        
            width: 1000px;        
            margin: 0 auto;        
            text-align: center;     
        }     
        .barcon1 {        
            font-size: 17px;        
            float: left;        
            margin-top: 20px;    
        }     
        .barcon2 {        
            float: right;    
        }     
        .barcon2 ul {        
            margin: 20px 0;        
            padding-left: 0;        
            list-style: none;        
            text-align: center;    
        }     
        .barcon2 li {        
            display: inline;    
        }     
        .barcon2 a {        
            font-size: 16px;        
            font-weight: normal;        
            display: inline-block;        
            padding: 5px;        
            padding-top: 0;        
            color: black;        
            border: 1px solid #ddd;        
            background-color: #fff;    
        }     
        .barcon2 a:hover{        
            background-color: #eee;    
        }     
        .ban {        
            opacity: .4;    
        }

        .black{
            color: black;
        }
        .grey{
            color: grey;
            cursor: pointer;
        }

        /* 遮罩层的样式 */
        #loading-modal {
          display: none; /* 默认隐藏 */
          position: fixed; /* 固定位置 */
          z-index: 1; /* 位于其他内容之上 */
          left: 0;
          top: 0;
          width: 100%; /* 覆盖整个页面宽度 */
          height: 100%; /* 覆盖整个页面高度 */
          background-color: rgb(0,0,0); /* 遮罩层颜色 */
          background-color: rgba(0,0,0, 0.5); /* 半透明 */
        }
         
        /* 对话框内容的样式 */
        .modal-content {
          position: fixed;
          background-color: #fefefe;
          margin: 15% auto; /* 垂直居中 */
          padding: 20px;
          border: 1px solid #888;
          width: 100%;
        }
         
        /* 关闭按钮的样式 */
        .close {
          color: #aaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
        }
         
        .close:hover,
        .close:focus {
          color: black;
          text-decoration: none;
          cursor: pointer;
        }

        .a{
        display: flex;
        flex-direction: column;
        align-items: center;
        }
        table {
            
            margin-top:200px;
            width:80%;
            text-align: center;
        }
        table th{
            background-color: rgb(249,249,249);
            border:1px solid rgb(236,236,236);
            height:50px;
        }  
        table td{
            border:1px solid rgb(236,236,236);
            height:50px;
            text-align: center;
        }

        .icon-eye {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-left: -35px;
            background-image: url('../images/eye.png');
        }
        .icon-eye-close {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-left: -35px;
            background-image: url('../images/eye-close.png');
        }

    </style></head>
    

    <body>
        <div style="margin-top: 30px;margin-bottom: 30px;">
           <h2 style="text-align:center">账号管理系统</h2>
           <input name="sign" id="sign" value="" style="display:none;">
        </div>
       
        <div style="width:100%;height: 120px;">
            <div style="width:50%;float: left;">
                <div>
                    管理员账号：<%= user%>                   <input type="text" name="admin_name" id="admin_name" style="display: none;" value="<%= user%>">
                 
                    <button type="submit" name="submit" style="width:130px;height:30px;margin-left: 20px;" onclick="oneRecord()">更换管理员账号</button>
                </div>
                <br>
                <div style="position: relative;">
                    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="pass_word" name="pass_word" style="width: 150px;height: 34px" value="<%= password%>">
                                <span class="icon-eye" id="icon-eye" onclick="showPassword()"></span>
                    <button type="submit" name="submit" style="width:130px;height:38px;margin-left: 20px;" onclick="onChangePassword()">修改密码</button>
                </div>
                <div style="margin-top: 10px;margin-bottom: 10px;color: red;">
                                    </div>
            </div>
        </div>

        <div style="width:100%; height:40px;border-bottom:solid 2px #AAAAAA;">
            <div style="float:left;width:200px;height:40px;text-align:center;line-height:40px;cursor: pointer;" class="aa borderBottom selectColor" onclick="fn(0)">
                子账号管理
            </div>
            <div style="float:left;width:200px;height:40px;text-align:center;line-height:40px;cursor: pointer;" class="aa" onclick="fn(1)">
                子账号创建
            </div>
            <div style="float:left;width:200px;height:40px;text-align:center;line-height:40px;cursor: pointer;" class="aa" onclick="fn(2)">
                子账号列表
            </div>
        </div>
        <div>
            <div class="bb">
                <div class="a" style="width: 100%;margin-top:20px">
                                    
                        <div style="width:500;margin: 30px auto;">
                            <input name="small_name" style="width:200px;height:30px" placeholder="请输入需要绑定的账号名" id="small_name" value="" type="search">
                            <select style="width:150px;height:30px" id="type">
                                <option value="0">买家查询</option>
                                <option value="1">卖家查询</option>
                                <option value="2">收货晒图</option>
                                <option value="3">查询账单</option>
                            </select>
                            <button type="submit" name="submit" style="width:100px;height:30px" onclick="onBinding()">绑定</button>
                        </div>
                       <!--  <div style="width:500;margin: 30px auto;color:red">
                            注：只输入小组名就按小组名搜索，输入旺旺号和小组名时添加绑定
                        </div> -->
                   
                    <table border="1" style="margin:auto;text-align:center">
                        <tbody><tr>
                            <th style="width:200px">序号</th>
                            <th style="width:200px">管理员账号</th>
                            <th style="width:200px">子账号</th>
                            <th style="width:200px">权限类型</th>
                            <th style="width:200px">操作</th>
                        </tr>
                        </tbody><tbody id="adminTbody">
                            
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="bb none">
                
                <div style="margin:20px">
                    <div style="width:200px;text-align:right;float: left;">
                    子账号名：
                    </div>        
                    <input name="new_account" style="width:310px;height:30px" placeholder="请输入子账号名" id="new_account" value="" type="search">
                </div>
                <div style="margin:20px">
                    <div style="width:200px;text-align:right;float: left;">
                    子账号密码：
                    </div>        
                    <input name="new_password" style="width:310px;height:30px" placeholder="请输入子账号密码" id="new_password" value="" type="search">
                </div>

                <div style="margin:50px;margin-left:150px">
                    <button type="submit" name="submit" style="width:150px;height:40px;" onclick="foundFn()">创建修改</button>
                </div>
            </div>
            <div class="bb none">
                <table border="0" class="iithree1 table2 table1" id="copy_border_1">
                    <tbody><tr>
                        <th width="100px">序号</th>
                        <th width="200px">管理员账号</th>
                        <th width="200px">子账号</th>
                        <th width="200px">子账号密码</th>
                        <th width="200px">最后操作时间</th>
                        <th width="200px">操作</th>
                    </tr>
                    </tbody>
                    <tbody id="adminTbody1"></tbody>
                </table>
            </div>
        </div>
    




<script src="/js/jquery.min.js"></script>
<script type="text/javascript">

    // 修改密码
    function onChangePassword(){
        var admin_name = document.getElementById("admin_name").value;
        if(!admin_name){
            alert('管理员账号授权信息已过期请重新授权登录！');return;
        }

        var pass_word = document.getElementById("pass_word").value;
        if(!pass_word){
            alert('密码不能为空！');return;
        }
        // alert(pass_word);return;

        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
               if(xmlhttp.responseText){
                    var rData = JSON.parse(xmlhttp.responseText)
                    if(rData){
                        alert(rData["msg"] )
                        if(rData["code"] == 1){
                            location.reload()
                        }
                    }
                   
                }
            }
        }
       
        xmlhttp.open("GET", window.location.origin + '/api/onChangePassword?user='+admin_name+'&new_password='+pass_word, true)
        xmlhttp.send();
    }

    // 创建子账号
    function foundFn(){
        var admin_name = document.getElementById("admin_name").value;
        if(!admin_name){
            alert('用户授权信息已过期请重新授权登录！');return;
        }

        var new_account = document.getElementById("new_account").value;
        if(!new_account){
            alert('请输入子账号名');return;
        }

        var new_password = document.getElementById("new_password").value;
        if(!new_password){
            alert('请输入子账号密码');return;
        }

        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.status == 200 && xmlhttp.readyState==4){
                //console.log(xmlhttp.responseText)
                var r = JSON.parse(xmlhttp.responseText)
                if(r){
                    alert(r.msg)
                    if(r.code == 1){
                        fn(2);
                    }
                }
            }
        }
        
        xmlhttp.open("GET", window.location.origin+'/api/updateSubAccount?new_account='+new_account+'&new_password='+new_password, true)
        xmlhttp.send();
    }

    function showPassword() {
        var password = document.getElementById('pass_word');
        var icon = document.getElementById('icon-eye');
        if (password.type === "password") {
            password.type = "text";
            icon.className = "icon-eye-close";
        } else {
            password.type = "password";
            icon.className = "icon-eye";
        }
    }

    // 管理员登录
    function oneRecord() {
        window.location.href= window.location.origin+"/admin/login";
    }

    // 删除
    function onDelete(val){
        console.log(val)
        var admin_name = document.getElementById("admin_name").value;
        if(!admin_name){
            alert('用户授权信息已过期请重新授权登录！');return;
        }


        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
               if(xmlhttp.responseText){
                    fn(0);
                }
            }
        }
       
        xmlhttp.open("GET", window.location.origin +'/api/delAccess?'+'id='+val, true)
        xmlhttp.send();
    }
    
    // 删除账号
    function onDelete2(val){
        console.log(val)
        var admin_name = document.getElementById("admin_name").value;
        if(!admin_name){
            alert('用户授权信息已过期请重新授权登录！');return;
        }


        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
               if(xmlhttp.responseText){
                    fn(2);
                }
            }
        }
       
        xmlhttp.open("GET", window.location.origin +'/api/delSubAccount?'+'id='+val, true)
        xmlhttp.send();
    }

    // 绑定
    function onBinding(){
        var admin_name = document.getElementById("admin_name").value;
        if(!admin_name){
            alert('用户授权信息已过期请重新授权登录！');return;
        }


        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
               if(xmlhttp.responseText){
                    var rData = JSON.parse(xmlhttp.responseText)
                    if(rData){
                        alert(rData["msg"] )
                        if(rData["code"] == 1){
                            fn(0);
                        }
                    }
                   
                    
                }
            }
        }
        
        var small_name = document.getElementById("small_name").value;
        var type = document.getElementById("type").value;
        if(!small_name){
            alert('请输入需要绑定的子账号');return;
        }
        xmlhttp.open("GET", window.location.origin+'/api/onbingAccess?'+'sname='+small_name+'&access_type='+type, true)
        xmlhttp.send();
    }


    // jq进页面自动加载
    $(function(){
        fn(0);
    })


    function fn(val){
        // 用户ID
        // var seller_userid = document.getElementById("seller_userid_2").value;

        // 优化选项卡事件
        classNamea = document.getElementsByClassName("aa");
        classNameb = document.getElementsByClassName("bb");
        for (var i = 0; i < classNamea.length; i++) {
            if(i == val){
                classNameb[i].classList.remove('none');
                classNamea[i].classList.add('borderBottom');
                classNamea[i].classList.add('selectColor');
            }else{
                classNameb[i].classList.add('none');
                classNamea[i].classList.remove('borderBottom');
                classNamea[i].classList.remove('selectColor');
            }

            // 批量复制
            if(i == val && val == '0'){
                var admin_name = document.getElementById("admin_name").value;
                if(!admin_name){
                    alert('用户授权信息已过期请重新授权登录！');return;
                }


                var xmlhttp;
                if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function(){
                    let typeText;
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                       if(xmlhttp.responseText){
                            var rData = JSON.parse(xmlhttp.responseText);
                                rData = rData["data"]
                                console.log(rData)
                            // 移除子节点
                            var tableobj=document.getElementById("adminTbody");
                            var pObjs = tableobj.childNodes;
                            for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试
                                tableobj.removeChild(pObjs[i]);
                            }

                            if(rData.length > 0){    
                                for (var i=0;i<rData.length;i++) {
                                    
                                    var trobj = document.createElement("tr");

                                    var tdobj0 = document.createElement("td");
                                    tdobj0.innerHTML = i+1;
                                    tdobj0.style = 'text-align: center;';
                                    trobj.appendChild(tdobj0);

                                    var tdobj1 = document.createElement("td");
                                    tdobj1.innerHTML = rData[i]['user'];
                                    // tdobj1.style = 'text-align: center;';
                                    trobj.appendChild(tdobj1);

                                    var tdobj2 = document.createElement("td");
                                    // tdobj2.innerHTML = rData[i]['title'];
                                    tdobj2.innerHTML = rData[i]['sname'];
                                    // tdobj2.style = 'text-align: center;';
                                    trobj.appendChild(tdobj2);

                                    var tdobj3 = document.createElement("td");
                                    switch (rData[i]['access_type']) {
                                        case '0':
                                            typeText = '买家查询';
                                            break;
                                        case '1':
                                            typeText = '卖家查询';
                                            break;
                                        case '2':
                                            typeText = '收货晒图';
                                            break;
                                        case '3':
                                            typeText = '查询账单';
                                            break;
                                        default:
                                            typeText = '';
                                    }
                                    tdobj3.innerHTML = typeText;
                                    // tdobj3.style = 'text-align: center;';
                                    trobj.appendChild(tdobj3);

                                    var tdobj4 = document.createElement("td");
                                    tdobj4.innerHTML = '<a href="javascript:void(0);" onclick="onDelete(\'' + rData[i]._id + '\')">删除</a>';
                     
                                    // tdobj4.style = 'word-break:break-all';
                                    trobj.appendChild(tdobj4);
                                    
                                    tableobj.appendChild(trobj);
                                }
                            }
                            else{
                                var trobj = document.createElement("tr");
                                var tdobj1 = document.createElement("td");
                                tdobj1.colSpan = '5';
                                tdobj1.style = 'padding-left: 10px;text-align: center;height: 150px;';
                                tdobj1.innerHTML = '暂无信息';
                                trobj.appendChild(tdobj1);
                                tableobj.appendChild(trobj);
                            }

                        }
                    }
                }
               
                xmlhttp.open("GET", window.location.origin+'/api/getAccessInfo', true)
                xmlhttp.send();
            }

            // 子账号列表
            else if(i == val && val == '2'){
                var admin_name = document.getElementById("admin_name").value;
                if(!admin_name){
                    alert('用户授权信息已过期请重新授权登录！');return;
                }

                var xmlhttp;
                if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                       
                       if(xmlhttp.responseText){
                            var rData = JSON.parse(xmlhttp.responseText);
                                rData = rData["data"]
                            // 移除子节点
                            var tableobj=document.getElementById("adminTbody1");
                            var pObjs = tableobj.childNodes;
                            for (var i = pObjs.length - 1; i >= 0; i--) { // 一定要倒序，正序是删不干净的，可自行尝试
                                tableobj.removeChild(pObjs[i]);
                            }

                            if(rData.length > 0){    
                                for (var i=0;i<rData.length;i++) {
                                    
                                    var trobj = document.createElement("tr");

                                    var tdobj0 = document.createElement("td");
                                    tdobj0.innerHTML = i+1;
                                    tdobj0.style = 'text-align: left';
                                    trobj.appendChild(tdobj0);
                                    
                                    var tdobj1 = document.createElement("td");
                                    tdobj1.innerHTML = rData[i]['user'];
                                    tdobj1.style = 'text-align: left';
                                    trobj.appendChild(tdobj1);

                                    var tdobj2 = document.createElement("td");
                                    // tdobj2.innerHTML = rData[i]['title'];
                                    tdobj2.innerHTML = rData[i]['sname'];
                                    tdobj2.style = 'text-align: left';
                                    trobj.appendChild(tdobj2);

                                    var tdobj3 = document.createElement("td");
                                    tdobj3.innerHTML = rData[i]['password'];
                                    tdobj3.style = 'text-align: left';
                                    trobj.appendChild(tdobj3);

                                    var tdobj4 = document.createElement("td");
                                    tdobj4.innerHTML = formatDate(rData[i]['last_time']);
                                    tdobj4.style = 'text-align: left';
                                    trobj.appendChild(tdobj4);

                                    var tdobj5 = document.createElement("td");
                                    tdobj5.innerHTML = '<a href="javascript:void(0);" onclick="onDelete2(\'' + rData[i]._id + '\')">删除</a>';
                                    tdobj5.style = 'text-align: left';
                                    trobj.appendChild(tdobj5);
                                    
                                    tableobj.appendChild(trobj);
                                }
                            }
                            else{
                                var trobj = document.createElement("tr");
                                var tdobj1 = document.createElement("td");
                                tdobj1.colSpan = '5';
                                tdobj1.style = 'padding-left: 10px;text-align: center;height: 150px;';
                                tdobj1.innerHTML = '暂无信息';
                                trobj.appendChild(tdobj1);
                                tableobj.appendChild(trobj);
                            }

                        }
                    }
                }
               
                xmlhttp.open("GET", window.location.origin + '/api/getSubAccount', true)
                xmlhttp.send();
            }

            else{
               
            }
        }
    
    }
    function formatDate(date) { 
        date = new Date(date)
        if (!date) return ""; 
        var year = date.getFullYear(); 
        var month = ("0" + (date.getMonth() + 1)).slice(-2); 
        var day = ("0" + date.getDate()).slice(-2); 
        var hours = ("0" + date.getHours()).slice(-2); 
        var minutes = ("0" + date.getMinutes()).slice(-2); 
        var seconds = ("0" + date.getSeconds()).slice(-2); 

        return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds; 
    } 
</script>
</body>
</html>
